<template>

  <div>
    <el-row :gutter="20" style="background-color: white">
      <el-col  :offset="0">
        <a href="#">首页</a> / 巡检管理 / 巡检计划管理
      </el-col>
    </el-row><hr/>
    
    <el-row :gutter="20">
      <el-col :span="5" :offset="2" >
        <el-input placeholder="请输入巡检点编号" clearable v-model="id"></el-input>
      </el-col>
      <el-col :span="5" :offset="1">
         <el-select v-model="taskcondition" placeholder="请选择状态">
            <el-option label="已完成" value="已完成">已完成</el-option>
            <el-option label="未完成" value="未完成">未完成</el-option>
          </el-select>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-input placeholder="请输入巡检点名称" v-model="name" clearable></el-input>
      </el-col>
      <el-col :span="2" :offset="0">
        <el-button type="primary" icon="el-icon-search" @click="findwhere()">搜索</el-button>
      </el-col>
    </el-row><hr/>

    <el-row :gutter="20">
      <el-col :span="4" :offset="0">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="dialogFormVisible = true"
          >添加</el-button
        >
        <el-button type="danger" icon="el-icon-delete">删除</el-button>
      </el-col>
    </el-row>

    <el-table :data="pagination.records" style="width: 100%" :default-sort = "{prop: 'parkinglot_id', order: 'descending'}" >
      <el-table-column prop="conditiontaskId" label="巡检任务ID" width="180">
      </el-table-column>
      <el-table-column prop="positionplan.name" label="计划名称" width="180">
      </el-table-column>
      <el-table-column prop="staffMsg.staffName" label="巡检人">
      </el-table-column>
      <el-table-column prop="conditiontime" label="巡检时间">
      </el-table-column>
        <el-table-column prop="methods" label="巡检方式">
      </el-table-column>
      <el-table-column prop="taskcondition" label="状态">
      </el-table-column>
      <el-table-column prop="taskrecord" label="巡检日志">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
                <el-button
                size="mini"
                @click="updateUI(scope.row)">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="drop(scope.row)" >删除</el-button>
            </template>
      </el-table-column>
    </el-table>


    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[3,5,8,10]"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>



    <!-- 添加巡检点页面的弹出框 -->
    <el-dialog title="添加巡检点信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="绑定巡检计划" :label-width="formLabelWidth">
          <el-select
            v-model="form.positionplanId"
            placeholder="必填，请选择计划"
            style="margin-right: 400px"
          >
            <el-option
              v-for="plan in positionplan"
              :key="plan.positionplanId"
              :value="plan.positionplanId"
              >{{ plan.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="绑定巡检人" :label-width="formLabelWidth">
          <el-select
            v-model="form.staffId"
            placeholder="必填，请选择巡检人"
            style="margin-right: 400px"
          >
            <el-option
              v-for="staff in Staffmsglist"
              :key="staff.staffId"
              :value="staff.staffId"
              >{{ staff.staffName }}</el-option
            >
          </el-select>
        </el-form-item>
         <el-form-item label="巡检时间" :label-width="formLabelWidth">
          <el-input
            v-model="form.conditiontime"
            placeholder="必填，请填写巡检时间"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="巡检方式" :label-width="formLabelWidth">
          <el-select v-model="form.methods" placeholder="请选择巡检方式">
            <el-option label="巡逻" value="巡逻">巡逻</el-option>
            <el-option label="站岗" value="站岗">站岗</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="esc">取 消</el-button>
        <el-button type="primary" @click="save"
          >保存</el-button
        >
      </div>
    </el-dialog>


    <!-- 修改停车场页面的弹出框 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisibleupdate">
      <el-form :model="updateform">
        <el-form-item label="绑定巡检计划" :label-width="formLabelWidth">
          <el-select
            v-model="updateform.positionplan.positionplanId"
            placeholder="必填，请选择计划"
            style="margin-right: 400px"
          >
            <el-option
              v-for="plan in positionplan"
              :key="plan.positionplanId"
              :value="plan.positionplanId"
              >{{ plan.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="绑定巡检人" :label-width="formLabelWidth">
          <el-select
            v-model="updateform.staffMsg.staffId"
            placeholder="必填，请选择巡检人"
            style="margin-right: 400px"
          >
            <el-option
              v-for="staff in Staffmsglist"
              :key="staff.staffId"
              :value="staff.staffId"
              >{{ staff.staffName }}</el-option
            >
          </el-select>
        </el-form-item>
         <el-form-item label="巡检时间" :label-width="formLabelWidth">
          <el-input
            v-model="updateform.conditiontime"
            placeholder="必填，请填写巡检时间"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="巡检方式" :label-width="formLabelWidth">
          <el-select v-model="updateform.methods" placeholder="请选择巡检方式">
            <el-option label="巡逻" value="巡逻">巡逻</el-option>
            <el-option label="站岗" value="站岗">站岗</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="updateform.taskcondition" placeholder="请选择状态">
            <el-option label="未完成" value="未完成">未完成</el-option>
            <el-option label="已完成" value="已完成">已完成</el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="巡检日志" :label-width="formLabelWidth">
          <el-input
            v-model="updateform.taskrecord"
            placeholder="必填，请填写巡检日志"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escupdate">取 消</el-button>
        <el-button type="primary" @click="updateKeep">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        id:'',
        name:'',
        taskcondition:'',
      pagination: [],
      paginationupdate: [],
      userlist:[],
      dialogFormVisible: false,
      dialogFormVisibleupdate: false,
      dialogVisible: false,
      form: {
          positionplanId:'',
          staffmsg:'',
          conditiontime:'',
          methods:'',
      },
       updateform: {
           positionplan:{},
          staffMsg:{},
          conditiontime:'',
          methods:'',
          taskcondition:'',
          taskrecord:''

      },
      Staffmsglist:[],
      positionplan:[],
      formLabelWidth: "120px",
    };
  },
  methods: {
    
    //分页查询巡检点信息
    find(page = 1, pageSize = 5) {
      this.id="";this.type="";this.inspection="";
      let url = "/leanyuan/Conditiontask/FindAllConditiontask?pageno=" + page + "&pagesize=" + pageSize;
  
      this.$axios.get(url).then((resp) => {

          console.log(resp.data);
          this.pagination=resp.data;

        }).catch((ex) => {});
    },
     finduser(page = 1, pageSize = 100) {
      let url = "/leanyuan/TAdmin/FindAllTAdmin";
      this.$axios.get(url).then((resp) => {

          console.log(resp.data);
          this.userlist=resp.data;

        }).catch((ex) => {});
          let url2 = "/leanyuan/Staffmsg/FindAllStaffmsg1";
      this.$axios.get(url2).then((resp) => {

          console.log(resp.data);
          this.Staffmsglist=resp.data;

        }).catch((ex) => {});
         let url1 = "/leanyuan/Positionplan/FindAllPositionplan2?pageno=" + page + "&pagesize=" + pageSize;
      this.$axios.get(url1).then((resp) => {
 console.log(111111111);
          console.log(resp.data);
          this.positionplan=resp.data;

        }).catch((ex) => {});
    },
    findwhere(pageno = 1, pageSize = 5){
        let url = "/leanyuan/Conditiontask/FindAllConditiontask1?pageno=" + pageno + "&pagesize=" + pageSize +"&id="+this.id + "&name=" + this.name + "&taskcondition=" + this.taskcondition;
      this.$axios.get(url).then((resp) => {

          console.log(resp.data);
          this.pagination=resp.data;

        }).catch((ex) => {});
    },
     save() {

      let url = "/leanyuan/Conditiontask/SaveConditiontask?positionplanId="+this.form.positionplanId+"&staffId="+this.form.staffId+"&conditiontime="+this.form.conditiontime+"&methods"+this.form.methods;
      this.$axios.get(url).then((resp) => {
          if(resp.data="添加成功"){
            this.dialogFormVisible=false;
             this.find();
          }else{
            alert("信息已存在");
          }
          console.log(resp.data);
        }).catch((ex) => {});
        this.form={
         positionplanId:'',
          staffId:'',
          conditiontime:'',
          methods:'',
      };
    },
    drop(row){
         console.log(row.conditiontaskId);
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示',
                            { type: 'warning' })                        
                        .then(() => {
                          let url = "/leanyuan/Conditiontask/DeleteConditiontask?id="+row.conditiontaskId;
                 this.$axios.post(url).then((resp) => {
          
                        console.log(resp.data);

                               }).catch((ex) => {});
                            //调用服务端的处理，然后再给出成功提示
                             this.$message({type: 'success', message: row.uid+',删除成功!'});
                             this.find();
                        }); 
                          this.find();

    },

    updateUI(row) {
      this.dialogFormVisibleupdate = true;
      this.updateform = row;
      console.log(row)
    },

    updateKeep(){
       let url = "/leanyuan/Conditiontask/UpdateConditiontask";
      this.$axios
        .post(url, this.updateform)
        .then((resp) => {
          console.log(resp);
          if (resp.data) {
            this.dialogFormVisibleupdate = false;
            this.dialogVisible = false;
            this.parkinglot = {};
            this.find();
          } else {
            this.dialogVisible = true;
          }
        })
        .catch((ex) => {});
    },
    esc(){
      this.dialogFormVisible=false;
    this.form={};
    },
     escupdate(){
      this.dialogFormVisibleupdate=false;
      this.find();
    },
     //每页显示的记录数发生改变，查询
    handleSizeChange(pageSize){
      this.find(this.pagination.current,pageSize);
    },
    //当前页面发生改变，查询
    handleCurrentChange(page){
      this.find(page,this.pagination.size);
    },
  },
  mounted() {
      this.find();
       this.finduser();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 24px;
}
.el-container {
  margin-top: -58px;
  height: 100%;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
#div1 {
  height: 150px;
  width: 100px;
  background-color: red;
  margin-left: 210px;
}
</style>